<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>蜗牛二手图书交易网首页</title>
    <!--引入资源：vue要在element之前引入-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/index.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/theme-chalk/index.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
    <script src="/js/axios.helper.js"></script>
    <style>
        .el-row {
            margin-bottom: 20px;
        &:last-child {
             margin-bottom: 0;
         }
        }
        .el-col {
            border-radius: 4px;
        }
        .bg-purple-dark {
            background: #99a9bf;
        }
        .bg-purple-light {
            background: #e5e9f2;
        }
        .grid-content {
            border-radius: 4px;
            min-height: 36px;
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
        }
    </style>
</head>
<body>
    <div id="app">
        <el-container>
            <el-header>
                <!--第一行：头部-->
                <el-row>
                    <el-col :span="24"><div class="grid-content bg-purple-light">蜗牛学苑</div></el-col>
                </el-row>
            </el-header>
            <el-main>
                <!--第二行：搜索-->
                <el-row>
                    <el-col :span="12">
                        <!--第二行：左边搜索-->
                        <el-form :inline="true" :model="condition" class="demo-form-inline">
                            <el-form-item label="请输入">
                                <el-input v-model="condition.keyword" placeholder="书名/作者/类型"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="queryBook">查询</el-button>
                            </el-form-item>
                        </el-form>
                    </el-col>
                    <el-col :span="12">
                        <!--第二行：右边 个人中心 我的购物车 我的订单-->
                        <div style="text-align: right">

                            <!--未登录显示-->
                            <span v-if="nickName == ''">
                                <el-link type="info" :href="'/login.html'">登录</el-link>
                                <el-link type="info">注册</el-link>
                            </span>
                            <span v-else>
                                欢迎你,{{nickName}}
                                <el-link type="info" @click="logout">退出系统</el-link>
                            </span>

                            <el-link type="info" :href="'/cart.html'">我的购物车</el-link>
                            <el-link type="info">我的订单</el-link>
                        </div>
                    </el-col>
                </el-row>

                <!--第三行：面包屑； 类别导航-->
                <el-row>
                    <el-col :span="24">
                        <el-breadcrumb separator="/">
                            <el-breadcrumb-item v-for="type in typeList">
                                <el-link :href="`/index/showBookList?typeId=${type.id}`" type="info" style="color: gray; font-weight: normal">{{type.name}}</el-link>
                            </el-breadcrumb-item>
                        </el-breadcrumb>
                    </el-col>
                </el-row>

                <!--我的购物车-->
                <el-row>
                    <el-col :span="24">
                        <el-button type="success">清空购物车</el-button>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="24">
                        <el-table ref="multipleTable" :data="cartVo.cartItemVos" tooltip-effect="dark"
                                style="width: 100%" @selection-change="handleSelectionChange">
                            <el-table-column type="selection" width="55"></el-table-column>
                            <el-table-column prop="name" label="商品名称" width="150"></el-table-column>
                            <el-table-column label="商品图片" width="250">
                                <template slot-scope="scope">
                                    <el-image style="width:120px;height: 120px" :src="scope.row.imgsrc"></el-image>
                                </template>
                            </el-table-column>
                            <el-table-column prop="price" label="商品单价" width="150"></el-table-column>
                            <el-table-column label="购买数量" width="220">
                                <template slot-scope="scope">
                                    <el-input-number v-model="scope.row.buyCount" @change="handleChange(scope.row)"
                                                     :min="1" :max="10" label="购买数量"></el-input-number>
                                </template>
                            </el-table-column>
                            <el-table-column prop="sumPrice" label="小计" width="220"></el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-col>
                </el-row>

                <!--总价  /  下单-->
                <el-row>
                    <el-col :span="22">
                        总价(元)：{{cartVo.totalPrice}}
                    </el-col>
                    <el-col :span="2">
                        <el-button @click="calc">下单</el-button>
                    </el-col>
                </el-row>



            </el-main>
        </el-container>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data(){
            return {
                // 搜索条件
                condition:{
                    keyword: ''
                },
                typeList:[],
                nickName: '',
                cartVo: {
                    cartItemVos: [],
                    totalPrice: 0
                },
                multipleSelection: []
            }
        },
        methods: {
            // 下单
            calc(){
                if ( this.multipleSelection.length > 0 ) {
                    // 获取选中的购物项id:  [1,2,3]
                    let ids = this.multipleSelection.map(row=>row.id);
                    // 通过后台转发
                    location.href = '/index/calc?ids=' + ids;
                } else {
                    this.$message.warning('请先选择结算的商品！')
                }
            },
            // 图书搜索
            queryBook(){

            },
            // 查询图书分类列表
            queryBookType(){
                axios.get('/booktype').then(resp=>{
                     this.typeList = resp.data.data;
                })
            },
            // 查询登录用户昵称
            getLoginName() {
                // axios请求，会通过拦截器携带token到后台
                axios.get('/user/getLoginName').then(resp=>{
                    if (resp.data.code == 200) {
                        this.nickName = resp.data.data;
                    } else {
                        this.nickName = ''
                    }
                })
            },
            logout() {
                this.$confirm('确定退出?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    localStorage.removeItem("token");
                    location.href = '/index.html'
                })

            },
            // 我的购物车
            queryCart() {
                axios.post('/cart/mycart').then(resp=>{
                    this.cartVo.cartItemVos = resp.data.data.cartItemVos;
                    this.cartVo.totalPrice = resp.data.data.totalPrice;
                })
            },
            // 购物车-修改数量
            handleChange(row) {
                console.log('row',row);
                axios.post(`/cart/changeBuyNum?bookId=${row.id}&buyCount=${row.buyCount}`).then(resp=>{
                    // 重新查询购物车
                    this.queryCart();
                })
            },
            handleDelete(id) {
                axios.delete(`/cart/${id}`).then(resp=>{
                    // 重新查询购物车
                    this.queryCart();
                })
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            }
        },
        created(){
            // 查询图书分类列表
            this.queryBookType();
            // 查询登录用户昵称
            this.getLoginName();
            // 我的购物车
            this.queryCart();
        }
    })
</script>
</html>